<!--
 * @Description: 
 * @Author: Wen
 * @Date: 2024-11-01 16:31:05
 * @LastEditors: Wen
 * @LastEditTime: 2024-11-05 17:17:41
 * 太棒了，又坚持了一天
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新用户注册</title>
    <link rel ="icon" href="./img/image.ico" type="image/x-icon">
    <style>
        #app{
            width: 100vm;
            height: 97vh;
            border: 1px solid rgb(25, 24, 24);
            background-image:url("img/bg.png") ;
            background-repeat: no-repeat;
            background-size: contain;
        }
        #write{
            width: 900px;
            height: 70vh;
            border: 10px solid rgb(214, 208, 208);
            background-color: #fff;
            margin: 50px auto;
            padding: 20px;
            border-radius: 10px;
        }
        #left{
            float: left;
            /* border: 1px solid red; */
          }
          #middle{
            width: 60%;
            height: 70%;
            float: left;
            /* border: 1px solid orange; */
            margin: 70px;
            margin-top: 50;
          }
          #right{
            float: right;
            /* border: 1px solid greenyellow; */
          }
          #anniu{
            width: 70px;
            height: 50px;
            background-color: yellow;
            margin-left:calc(50% - 180px);
          }
    </style>
 <!-- 文档的主体 -->
</head>
<body>
  <div id="app">
    <div id="write">
      <div id="right">
        <span >已有账号?</span>
        <span style="color: red">立即登录</span>
    </div>
      <div id="left">
      <h1 style="color: gold;">新用户注册</h1>
      <h2>USER REGISTER</h2>
      </div>
      <div id="middle">
          <form action="">
              <div style="padding: 10px;">
                  用户名: <input class="fromInput" type="text" name="username" >
              </div>
              <div style="padding: 10px;" style="padding: 10px;">
                  密码: <input class="fromInput" type="password"name="password">
              </div>
              <div style="padding: 10px;">
                  Email: <input class="fromInput"  type="text"name="email">
              </div>
              <div style="padding: 10px;">
                  姓名: <input type="text"name="name">
              </div>
              <div style="padding: 10px;">
                  性别:             
                  <label for="genderNan">
                  男<input type="radio" name="gender" value="男">
                  </label>
                  <label for="genderNv">
                  女<input type="radio" name="gender" value="女">
                  </label>
              </div>
              <div style="padding: 10px;">
                  出生日期:
                  <input type="date"name="birth">
              </div>
              <div style="padding: 10px;">
                  验证码:
                  <input type="text" name="code"></input>
                  <img src="./img/yzm.jpg" alt=""></img>
              </div>
              <div>
                  <input id="anniu" type="submit" value="注册" style="padding: 20px;">                  
                </input>
                </div>
              </div>
          </form>
      </div>      
    </div>
  </div>    
</body>
</html>